<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
    <script src="../jQuery/jquery-1.12.4.min%20(2).js"></script>
    <script>
        jQuery(function ($) {
            var mydiv = $('#divAn');
            //先给div一个默认的样式，即为初始样式
            mydiv.css({
                backgroundColor:"pink",
                width:'100px',
                height:'100px',
                positiom:'absolite'
            });
            /*
             animate 动画的执行
             该方法 也就是在执行一个动画
             动画 由各个不同的外在样式在不同时间点的切换结构

             参数abcd的意思
             a 结束样式{}
             b 过渡时间
             c 动画的回调方法 function){}
             系统对话框的执行会阻塞动画的队列

             stop 动画的停止
             参数1
             true:停止所有动画
             false:停止当前还没执行完成的动画
             参数2
             true:省略当前未完成的动作，停止在动画结束的状态
             false:停止在当前未完成的当前状态

             支持坐标移动 内外边距 透明度 可以写连续多个动画
             不支持颜色变化 不支持边框
             */
            //点击按钮div的动画效果的结束样式
            $('#btnAn').click(function () {
                mydiv.animate({width:"120px",
                                   height:'120px'},200);//200表示时间 2秒*/
            })
        })
    </script>
</head>
<body>
<fieldset>
    <legend>效果</legend>
    <p class="f-w">jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。</p>
    <hr style="border: 1px dashed gray;" />

    <span class="redb">aniamte</span>:该方法 也就是在执行一个动画  - > 动画 由各个不同的外在样式在不同时间点的切换结构<br/>
    <span class="f-w">说明：</span><br/>
    <span>参数abcd的意思</span><br/>
    <span>a 结束样式{}</span><br/>
    <span>b 过渡时间</span><br/>
    <span>c 动画的回调方法 function){}</span><br/>
    <span>系统对话框的执行会阻塞动画的队列</span>
    <p class="f-w">代码示例：</p>
    <pre>
        <span class="f-w">html代码：</span>
        &lt;div id="divAn"&gt;&lt;/div&gt;

        <span class="f-w">jQ代码：</span>

        <span class="g">//开始代码</span>
        var mydiv = $('#divAn');
            //先给div一个默认的样式，即为初始样式
            mydiv.css({
                backgroundColor:"pink",
                width:'100px',
                height:'100px',
                positiom:'absolite'
            });

        <span class="g">//结束代码</span>
        $('#btnAn').click(function () {
                mydiv.<span class="red">animate</span>({width:"120px",
                                height:'120px'},200);//200表示时间 2秒*/
            })
        })
    </pre>

    <p class="f-w">代码效果：</p><button id="btnAn">运行效果</button>　<span class="g">点击运行时，div的宽高变化到结束代码的样子</span>
    <div id="divAn"></div>
</fieldset>
jquery
效果作业
show
hide
toggle

slideDown
slideUp
slideToggle

fadeIn
fadeOut
fadeToggle

aniamte
stop
delay

</body>
</html>